<template>
  <up-loading-page v-if="loading" :loading="loading" loading-text="努力加载中..." font-size="48" iconSize="56"></up-loading-page>
  <view class="content" v-else>
    <view class="radius orderCard">
      <up-text type="" color="#000" size="58" :bold="true" :text="titleText"></up-text>
    </view>
    <u-gap height="24" bgColor="#f2f2f2"></u-gap>
    <view class="radius orderCard" v-if="detail.logistics || detail.logisticsId">
      <up-text type="" color="#000" size="36" text="物流信息"></up-text>
      <view class="showDetailItem" v-if="detail.logisticsId">
        <view class="showDetailItemLeft">
          <up-text type="" color="#333" size="32" text="物流编号"></up-text>
        </view>
        <view class="row" style="width: calc(100% - 160rpx)">
          <up-text type="" color="#333" size="32" :text="detail.logisticsId" wordWrap="anywhere" margin="0 30rpx 0 0"></up-text>
          <up-copy :content="detail.logisticsId">
            <view class="copyView">复制</view>
          </up-copy>
        </view>
      </view>
      <view class="showDetailItem" v-if="detail.logistics">
        <view class="showDetailItemLeft">
          <up-text type="" color="#333" size="32" text="物流状态"></up-text>
        </view>
        <view>
          <up-text type="" color="#333" size="32" :text="detail.logistics" wordWrap="anywhere"></up-text>
        </view>
      </view>
    </view>
    <u-gap height="24" bgColor="#f2f2f2"></u-gap>
    <view class="radius orderCard">
      <up-text type="" color="#000" size="36" text="订单信息"></up-text>
      <view class="showDetailItem">
        <view class="showDetailItemLeft">
          <up-text type="" color="#333" size="32" text="配送地址"></up-text>
        </view>
        <view>
          <up-text type="" color="#333" size="32" :text="detail.addr" wordWrap="anywhere"></up-text>
          <view class="row">
            <up-text type="" color="#333" size="32" :text="detail.userName" mode="name" :block="true"></up-text>
            <up-text type="" color="#333" size="32" :text="detail.phone" mode="phone" format="encrypt" :block="true" margin="0 0 0 8rpx"></up-text>
          </view>
        </view>
      </view>
      <template v-if="showInfoDetail">
        <view class="showDetailItem">
          <view class="showDetailItemLeft">
            <up-text type="" color="#333" size="32" text="下单时间"></up-text>
          </view>
          <view>
            <up-text type="" color="#333" size="32" :text="time" wordWrap="anywhere"></up-text>
          </view>
        </view>
        <view class="showDetailItem">
          <view class="showDetailItemLeft">
            <up-text type="" color="#333" size="32" text="订单编号"></up-text>
          </view>
          <view class="row" style="width: calc(100% - 160rpx); margin-left: 8px">
            <up-text type="" color="#333" size="32" :text="detail.tradeNo" wordWrap="anywhere" margin="0 30rpx 0 0"></up-text>
            <up-copy :content="detail.tradeNo">
              <view class="copyView">复制</view>
            </up-copy>
          </view>
        </view>
      </template>
      <view class="row showMore">
        <view @click="showMoreOrderInfo">
          <up-text v-if="showInfoDetail" type="" color="a3a3a3" suffixIcon="arrow-up" iconStyle="font-size: 12px; margin-left: 4px" size="24" text="点击收起"></up-text>
        <up-text v-else type="" color="a3a3a3" suffixIcon="arrow-down" iconStyle="font-size: 12px; margin-left: 4px" size="24" text="查看更多"></up-text>
        </view>
      </view>
    </view>
    <u-gap height="24" bgColor="#f2f2f2"></u-gap>
    <view class="radius orderCard">
      <up-text type="" color="#000" size="36" text="商品费用"></up-text>
      <view v-for="item in productList" class="productItem" :key="item.id">
        <view style="height: 176rpx; width: 176rpx;">
          <u-image height="176rpx" width="176rpx" :src="item.goodsPic" :lazy-load="true" mode="aspectFit"></u-image>
        </view>
        <view style="flex: 1; margin: 0 24rpx;">
          <up-text type="" color="#000" size="36" :text="item.goodsName" :bold="true" :lines="2"></up-text>
          <up-text size="28" type="" color="#a3a3a3" :text="item.goodsDes" :lines="2" margin="24rpx 0 0"></up-text>
        </view>
        <view style="display: flex; flex-direction: column; align-items: flex-end;">
          <view>
            <up-text type="" color="#000" size="28" :text="`¥ ${priceFormatPrice(item.goodsPrice)}`" ></up-text>
          </view>
          <view style="margin-top: 24rpx;">
            <up-text type="" size="28" color="#a3a3a3" :text="`x ${item.num}`" ></up-text>
          </view>
        </view>
      </view>
      <view class="row showMore" v-if="detail?.goodsModelList?.length > minProductNum">
        <view @click="showProduct">
          <up-text v-if="showPriceDetail" type="" color="a3a3a3" suffixIcon="arrow-up" iconStyle="font-size: 12px; margin-left: 4px" size="24" text="点击收起"></up-text>
        <up-text v-else type="" color="a3a3a3" suffixIcon="arrow-down" iconStyle="font-size: 12px; margin-left: 4px" size="24" text="剩余商品"></up-text>
        </view>
      </view>
      <up-line color="#f2f2f2" margin="24rpx 0"></up-line>
      <view class="row" style="justify-content: space-between;">
        <up-text type="" size="32" color="#000" :bold="true" text="实付款" ></up-text>
        <view>
          <up-text type="" color="#000" size="32" :text="`¥ ${priceFormatPrice(detail.totalPrice)}`" ></up-text>
        </view>
      </view>
    </view>
    <view class="bottomWrap" v-if="`${detail.isComplete}` === '1' && `${detail.isPack}` === '1' && `${detail.isReturn}` === '1'">
      <u-button :customStyle="customStyle" @click="showReturnOrderModal = true" :plain="true" text="退货"></u-button>
      <u-modal :show="showReturnOrderModal" :content='`是否退货 ${detail.tradeNo} 订单`'
        :showCancelButton="true" confirmColor="#59B235" :asyncClose="true"
        cancelText="取消" confirmText="退货" @confirm="confirm" @cancel="showReturnOrderModal = false"
        ></u-modal>
    </view>
    <u-gap height="200" bgColor="#f2f2f2"></u-gap>
  </view>
  <up-toast ref="uToastRef"></up-toast>
</template>

<script>
import dayjs from 'dayjs';
import { getOrderInfo, returnOrder } from '@/services/order';

export default {
  data() {
    return {
      tradeNo: '',
      loading: true,
      detail: {},
      showInfoDetail: false,
      showPriceDetail: false,
      minProductNum: 1,
      showReturnOrderModal: false,
      customStyle: {
        width: 'calc(100vw - 48rpx)'
      },
    }
  },
  onLoad(option) {
    this.tradeNo = option.tradeNo;
  },
  computed: {
    allNum() {
      let allNum = 0;
      this.productList.forEach(({ num }) => {
        allNum += num;
      })
      return allNum;
    },
    time() {
      return dayjs(this?.detail?.orderTime).format('YYYY-MM-DD HH:mm:ss');
    },
    productList() {
      const { detail, showPriceDetail } = this;
      const { goodsModelList = [] } = detail || {};
      if (showPriceDetail || goodsModelList.length <= this.minProductNum) {
        return goodsModelList
      }
      return [...goodsModelList].splice(0, this.minProductNum);
    },
    titleText() {
      const { isComplete, isPack, isReturn } = this.detail;
      if (`${isComplete}` === '2') {
        return '已到达'
      } else if (`${isReturn}` === '2') {
        return '已退货'
      } else if (`${isPack}` === '2') {
        return '已打包'
      } else {
        return '已下单';
      }
    },
  },
  onShow() {
    this.getOrderInfo();
  },
  beforeUnmount() {
    this.timer && clearTimeout(this.timer);
  },
  methods: {
    priceFormatPrice (price) {
      return uni.$u.priceFormat(price, '2', '.', ',');
    },
    showMoreOrderInfo() {
      this.showInfoDetail = !this.showInfoDetail;
    },
    showProduct() {
      this.showPriceDetail = !this.showPriceDetail;
    },
    getOrderInfo() {
      const { tradeNo } = this;
      const _that = this;
      getOrderInfo({
        tradeNo,
      }).then((res) => {
        console.log('res', res)
        if (res.success) {
          _that.detail = res.data;
        }
      }).finally(() => {
        this.loading = false;
        this.$refs.uToastRef.hide();
        uni.stopPullDownRefresh();
      });
    },
    async confirm() {
      const res = await returnOrder({
        tradeNo: this.detail.tradeNo,
      })
      if (res.success) {
        uni.$u.toast('退货成功');
        this.$refs.uToastRef.show({
          type: 'loading',
          title: '正在加载',
          message: "正在加载",
          duration: -1
        })
        this.getOrderInfo();
      } else {
        uni.$u.toast('退货失败')
      }
      this.showReturnOrderModal = false;
    },
  },
  onPullDownRefresh() {
    this.$refs.uToastRef.show({
      type: 'loading',
      title: '正在加载',
      message: "正在加载",
      duration: -1
    })
    this.getOrderInfo();
	},
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;
  min-height: 100vh;
}

.radius {
  border-radius: 12rpx;
}

.orderCard {
  background-color: #fff;
  margin: 0 30rpx;
  width: calc(100vw - 120rpx);
  padding: 30rpx;
}

.showDetailItem {
  display: flex;
  flex-direction: row;
  margin-top: 24rpx;
}

.showDetailItemLeft {
  width: 160rpx;
  flex-shrink: 0;
}

.showMore {
  align-items: center;
  justify-content: center;
  margin: 24rpx 0 0;
  width: 100%;
}

.copyView {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  height: 32rpx;
  padding: 0 16rpx;
  border: 1rpx solid #bbb;
  color: #bbb;
  border-radius: 16rpx;
}

.productItem {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  margin-top: 24rpx;
}

.bottomWrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(100vw - 48rpx);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 24rpx;
}
</style>
